<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link type="text/css" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet">
</head>
<script class="_dcdev_preset_" src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js"></script>


<body>
    <iframe id="preview_iframe" style="width:400px;height:568px;"></iframe>
    <iframe id="preview_iframe_table_show" style="width:100%;height:568px;"></iframe>
</body>

<script>
    var array = [{
            "type": "text",
            "title": "文本型244",
            "column_name": "title",
            "is_require": true,
            "default_value": "",
            "is_multi_line": true,
            "place_holder": "占位符",
            "max_value": 10,
            "min_value": 5,
            "hidden": false,
            "is_horizontal":false
        },
        {
            "type": "html",
            "html": "<hr>"
        },
        {
            "type": "text",
            "title": "文本型22",
            "column_name": "title1",
            "is_require": false,
            "default_value": "天气真好",
            "is_multi_line": false,
            "place_holder": "请输入标题",
            "max_value": 20,
            "min_value": 2,
            "is_horizontal":false
        },
        {
            "type": "password",
            "title": "密码框",
            "column_name": "password",
            "is_require": false,
            "default_value": "",
            "place_holder": "请输入密码",
            "max_value": 20,
            "min_value": 2,
            "is_horizontal":false
        },
        {
            "type": "date",
            "title": "日期型",
            "column_name": "date",
            "is_require": true,
            "default_value": "2020-06-01",
            "place_holder": "占位符",
            "start_date_value": "2020-04-01",
            "end_date_value": "2020-06-07",
            "is_horizontal":false

        },
        {
            "type": "number",
            "title": "数值型",
            "column_name": "number",
            "is_require": true,
            "default_value": 5,
            "num_type": "整型",
            "unit": "个",
            "max_value": 20,
            "min_value": 2,
            "is_horizontal":false

        },
        {
            "type": "bool",
            "title": "开关型",
            "column_name": "bool",
            "is_require": false,
            "default_value": true,
            "tvalue": true,
            "fvalue": false,
            "ttitle": "是",
            "ftitle": "否",
            "is_horizontal":false

        },
        {
            "type": "select",
            "title": "选择框",
            "column_name": "select",
            "is_require": true,
            "default_value": "广州",
            "options": ["北京", "上海", "广州", "深圳", "杭州"],
            "options_title": ["北京", "上海", "广州", "深圳", "杭州"],
            "is_horizontal":false

        },
        {
            "type": "option",
            "title": "单选型",
            "column_name": "option",
            "is_require": false,
            "default_value": "选项3",
            "options": ["选项1", "选项2", "选项3"],
            "options_title": ["选项1", "选项2", "选项3"],
            "is_horizontal":false

        },
        {
            "type": "checkbox",
            "title": "多选型",
            "column_name": "checkbox",
            "is_require": false,
            "default_value": "选项3",
            "options": ["选项1", "选项2", "选项3"],
            "options_title": ["选项1", "选项2", "选项3"],
            "is_horizontal":false

        },
        {
            "type": "image",
            "title": "图片型",
            "column_name": "image",
            "is_require": true,
            "default_value": "https://www.dcdev.net/icon.png",
            "has_thumb": true,
            "thumb_default_value": "https://www.dcdev.net/icon.png",
            "is_horizontal":false

        },
        {
            "type": "image",
            "title": "图片型2",
            "column_name": "image2",
            "is_require": false,
            "default_value": "https://www.dcdev.net/icon.png",
            "has_thumb": true,
            "thumb_default_value": "https://www.dcdev.net/icon.png",
            "is_horizontal":false

        },
        {
            "type": "phone",
            "title": "手机验证",
            "column_name": "phone",
            "is_require": false,
            "default_value": "",
            "place_holder": "请输入手机号码",
            "max_value": 20,
            "min_value": 2,
            "is_horizontal":false
        },
        {
            "type": "email",
            "title": "邮箱验证",
            "column_name": "email",
            "is_require": true,
            "default_value": "",
            "place_holder": "请输入邮箱",
            "max_value": 20,
            "min_value": 2,
            "is_horizontal":false
        },
        {
            "type": "url",
            "title": "网址验证",
            "column_name": "url",
            "is_require": false,
            "default_value": "",
            "place_holder": "请输入网址",
            "max_value": 60,
            "min_value": 2,
            "is_horizontal":false
        },
        {
            "type": "identity",
            "title": "身份证验证",
            "column_name": "phone",
            "is_require": false,
            "default_value": "",
            "place_holder": "请输入身份证号码",
            "max_value": 20,
            "min_value": 2,
            "is_horizontal":false
        },
        {
            "type": "submit",
            "submittext": "保存1",
            "resettext": "重置2",
            "is_horizontal":false
        }
    ];
</script>

<script src="./render_input_form_elementui.js"></script>
<script src="./render_table_elementui.js"></script>
<script>
    // 生成录入表单
{
    var html = create_layui_input_form(array, "", "margin:10px;");
    var iframeHtml = $(`#preview_iframe`).get(0);

    var all_html =
        `
<link type="text/css" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"><\/script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js"><\/script>
<style>
    
    .inline.el-form-item
    {
        display:inline-block !important;
        vertical-align: top;
    }
    .inline.el-form-item .el-form-item__content{
    	display:inline-block !important;
        vertical-align: top;
        margin-left:0 !important;
    }
    .inline.el-form-item .el-form-item__label {
	    float: none;
	    display: inline-block;
	}
</style>

${html}

<script type="text/javascript">
	//组件初始化
	var Main = {
	 	//表单组件的一些初始值以及值设置
	 	data() {
      return {
      	pickerOptions: {
          disabledDate(time) {
            return (time.getTime() < ${formdata['start_date_value']})||(time.getTime() > ${formdata['end_date_value']});
          },
      	},
        ruleForm: {
          text1:"${formdata['text1']}",
          text2:"${formdata['text2']}",
          password:"${formdata['password']}",
          phone:"${formdata['phone']}",
          email:"${formdata['email']}",
          url:"${formdata['url']}",
          identity:"${formdata['identity']}",
          bool:"${formdata['bool']}",
          select:"${formdata['select']}",
          option:"${formdata['option']}",
          checkbox:["${formdata['checkbox']}"],
          number:"${formdata['number']}",
          date:"${formdata['date']}",
          fileList: [{${formdata['fileList']}}]
          
        },
         
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
          type: [
            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
          ],
          resource: [
            { required: true, message: '请选择活动资源', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '请填写活动形式', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
            console.log(this.ruleForm)
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
       handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      }
    }
	}
	var Ctor = Vue.extend(Main);
	new Ctor().$mount('#app3');
<\/script>

`
    iframeHtml.contentWindow.document.write(all_html); // 动态写入返回页面到iframe
    iframeHtml.contentWindow.document.close();
}
</script>

</html>